<template>
  <g :transform="`translate(${x}, ${y})`">
    <!-- 定义渐变和阴影 -->
    <defs>
      <!-- 货架金属渐变 -->
      <linearGradient id="shelf-metal-line" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:#d1d1d1;stop-opacity:1" />
        <stop offset="50%" style="stop-color:#e9e9e9;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#d1d1d1;stop-opacity:1" />
      </linearGradient>
      <!-- 货架阴影 -->
      <filter id="shelf-shadow-line" x="-20%" y="-20%" width="140%" height="140%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
        <feOffset dx="2" dy="2" result="offsetblur"/>
        <feComponentTransfer>
          <feFuncA type="linear" slope="0.3"/>
        </feComponentTransfer>
        <feMerge>
          <feMergeNode/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
      </filter>
    </defs>

    <!-- 产线标题 -->
<!--    <text-->
<!--      x="0"-->
<!--      y="-20"-->
<!--      class="line-title"-->
<!--      text-anchor="start"-->
<!--    >{{ lineName }}</text>-->

    <!-- 货架组 -->
    <g v-for="(shelf, index) in shelves" :key="index">
      <ShelfFrontView
        :x="index * (shelfWidth + shelfSpacing)"
        :y="0"
        :layer-status="shelf.layerStatus"
        :layer-numbers="shelf.layerNumbers"
      />
    </g>
  </g>
</template>

<script setup lang="ts">
import ShelfFrontView from './ShelfFrontView.vue'

interface Shelf {
  layerStatus: ('empty' | 'occupied')[]
  layerNumbers: number[]
}

interface Props {
  x: number
  y: number
  lineName: string
  shelves: Shelf[]
  shelfWidth?: number
  shelfSpacing?: number
}

withDefaults(defineProps<Props>(), {
  x: 0,
  y: 0,
  shelfWidth: 200,
  shelfSpacing: 20
})

// Add default export
defineOptions({
  name: 'ProductionLineFrontView'
})
</script>

<style scoped>
.line-title {
  font-size: 18px;
  font-weight: bold;
  fill: #262626;
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));
}
</style>
